簡寫用的"恰當",可以讓整份程式碼變的很好閱讀
就像一篇充滿語助詞或贅詞
的文章和一篇行數少一半
用字遣詞很精準
的文章
用 Vue 的 util.ts 這個檔案當作例子,可以發現 if...else
else if
用的很少
每一個 function 幾乎都不超過 10 行
例如:
export function toString(val: any): string {
return val == null
? ''
: Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
? JSON.stringify(val, null, 2)
: String(val)
}
export function isPromise(val: any): val is Promise<any> {
return (
isDef(val) &&
typeof val.then === 'function' &&
typeof val.catch === 'function'
)
}
看到 &&
||
? ... : ...
這些都是簡寫的方式!
以下範例及內容皆取自
Logical operators
Nullish coalescing operator '??'
『 運算式是由運算元和運算子組成 』
『 邏輯運算子用來判斷運算式的真或假,結果只會有 true
或 false
』
JavaScript 有四個邏輯運算子
||
(OR)&&
(AND)!
(NOT)??
(Nullish Coalescing) (中文: 空值合併運算子)||
(OR)||
有四種可能的組合
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
遇到不是 Boolean 值的運算元,會先轉成 Boolean,再來比較
『 除非所有的運算元都為 false
,否則結果都為 true
』
(白話: 抓到一個 true,就算你 true)
||
用在 if 條件式的話,可以用來驗證眾多條件中是否有一個條件成立
let hour = 12;
let isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
alert( 'The office is closed.' ); // it is the weekend
}
還可以用在賦值上
result = value1 || value2 || value3;
// 1. 從左至右檢查運算元
// 2. 每一個運算元都會被轉成 boolean,一旦結果是 true,馬上停止,並回傳運算元原始的值
// 3. 如果全部的運算元都是 false,會回傳最後一個運算元
『 回傳的都是原始值,不會被轉換』
『 ||
回傳找到的第一個 truthy 值; 或是最後一個值 』
||
常使用在:
// Short-circuit evaluation
true || alert("not printed");
false || alert("printed");
// 結果會執行 alert("printed")
&&
(AND)同樣的, &&
(AND) 也是類似的規則
result = value1 && value2 && value3;
// 1. 從左到右對運算元進行估值
// 2. 將每一個運算元轉成 boolean,如果遇到結果為 false,馬上停止,立即回傳這個運算元的值
// 3. 假設所有的運算元都已經被運算了(全部為 truthy),回傳最後一個運算元
『 &&
回傳遇到的第一個 falsy 值,或是最後一個值 』
例如:
alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 3, the last one
!
(NOT)alert( !true ); // false
alert( !0 ); // true
而 !!
常用來把值轉換成 Boolean
第一個 !
將值轉換成 boolean,並回傳 inverse value
第二個 !
又再 inverse value 一次
??
(Nullish coalescing)回傳第一個不為 null/undefined
的值
result = a ?? b
等於 result = (a !== null && a !== undefined) ? a : b;
最常用來給預設值用
例如:
let user;
alert(user ?? "Anonymous"); // Anonymous (user not defined)
let user = "John";
alert(user ?? "Anonymous"); // John (user defined)
一樣也可以用在一系列的變數中,找出有定義的那個值
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
??
和 ||
的差異let height = 0;
alert(height || 100); // 100
// || 會將 `0` `false` `""` `null` `undefined` 都視為 falsy
alert(height ?? 100); // 0
??
回傳第一個有定義的值||
回傳第一個 truthy 的值
最後小結:
『 利用 Logical operators,省下大把大把的 if...else...
』
『 不用在多個 if else 中,尋尋覓覓最終值的答案 』